<template>
    <div>
        <p class="wrapper-title"><span>查看采购商详情</span></p>
        <div class="content-wrapper">
            <el-form ref="form" :model="form" label-width="140px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="采购商名称： ">
                            <span> {{row.companyName}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系人名称： ">
                            <span> {{row.linkman}} </span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="联系电话： ">
                            <span> {{row.contactPhone}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="地址： ">
                            <span> {{row.companyAddress}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="采购总数量： ">
                            <span> 2000公斤</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="buyersDetail-content-title">
                <span>历史订单：</span>
                <el-button type="text" size="small" @click="toList(9)">更多</el-button>
            </div>

            <div class="table-wrapper">
                <el-table :data="form.historyOrder" border style="width: 100%">
                    <el-table-column prop="orderCode" label="订单号"></el-table-column>
                    <el-table-column prop="commodityName" label="商品"></el-table-column>
                    <el-table-column label="金额（元）">
                        <template slot-scope="scope">
                            {{scope.row.sum = scope.row.realAmount * scope.row.unitPrice}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="realAmount" label="订单数量"></el-table-column>
                    <el-table-column prop="shippingAddress" label="收货地址"></el-table-column>
                </el-table>
            </div>
            <div class="buyersDetail-content-title">
                <span>当前订单：</span>
                <el-button type="text" size="small" @click="toList(form.currentOrder[0].status)">更多</el-button>
            </div>
            <div class="table-wrapper">
                <el-table :data="form.currentOrder" border style="width: 100%">
                    <el-table-column prop="orderCode" label="订单号"></el-table-column>
                    <el-table-column prop="commodityName" label="商品"></el-table-column>
                    <el-table-column prop="realAmount" label="金额（元）">
                        <template slot-scope="scope">
                            {{scope.row.sum = scope.row.realAmount * scope.row.unitPrice}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="realAmount" label="订单数量"></el-table-column>
                    <el-table-column prop="shippingAddress" label="收货地址"></el-table-column>
                </el-table>
            </div>
            <div class="buyersDetail-content-title">
                <span>合作过的农户：</span>
            </div>
            <div class="table-wrapper">
                <el-table :data="form.cooperatedFarmers" border style="width: 100%">
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="phone" label="联系方式"></el-table-column>
                    <el-table-column prop="factory" label="合作社名称"></el-table-column>
                    <el-table-column prop="businessScope" label="经营范围"></el-table-column>
                    <el-table-column prop="area" label="基地面积"></el-table-column>
                    <el-table-column prop="isFactory" label="附近工厂"></el-table-column>
                    <el-table-column prop="createdTime" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="showDig(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :totalNum="total" :currentPage="pageNo"
                            @handleCurrentChange="handleCurrentChange"></pagination>
            </div>
        </div>
        <el-dialog title="农户详情" :visible.sync="dialogFormVisible">
            <el-form label-width="150px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名："> {{row.name}}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="资质："> {{row.qualification}}</el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="合作社名称：">{{row.artelName}}</el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="农场营业执照编号：">{{row.businessLicense}}</el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="基地面积：">{{row.area}}</el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="周边有无工厂：">{{row.factory}}</el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="经营范围：">
                            {{row.businessScope}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div><span style="margin-right: 20px">是否有无公害绿色或有机证书:</span>{{row.certificate}}</div>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    import pagination from '../../../components/pagination/pagination'

    export default {
        name: 'buyersDetail',
        components: {
            pagination
        },
        data() {
            return {
                form: {
                    cooperatedFarmers: [],
                    currentOrder: [],
                    historyOrder: [],
                },
                row: {
                    companyAddress: "",
                    companyName: "",
                    contactPhone: "",
                    certificate: '',
                    businessScope: '',
                    businessLicense: '',
                    cooperationAmount: "",
                    id: "",
                    linkman: "",
                    purchaseAmount: "",
                },
                dialogFormVisible: false,
                pageSize: 8,
                total: 0,
                pageNo: 1,
            }
        },
        methods: {
            handleCurrentChange(val) {
                this.pageNo = val
                this.getData()
            },
            async getData() {
                const params = {
                    id: this.$route.query.id,
                    pageNum: this.pageNo,
                    pageSize: 8
                }
                const res = await this.http.get(this.api.purchase.getInfo, params)
                if (res && res.code == 200) {
                    this.total = Number(res.data.total)
                    this.form = res.data

                }
                else {
                    this.$message.error(res.message)
                }
            },
            showDig(val) {
                Object.assign(this.row, val)
                this.dialogFormVisible = true
            },
            toList(status) {
                this.$router.push({path: '/home/receiveOrder', query: {status}})
            }


        },
        mounted() {

            this.row = this.$route.query
            this.getData()
        },
        activated() {
            this.row = this.$route.query
            this.getData()
        }


    }
</script>
<style lang="scss" scoped>
    .buyersDetail-content-title {
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
    }
</style>

